<template>
  <view>
    <image class="order-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>
    <u-navbar leftText="订单详情" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
              :bgColor="bgColor">
    </u-navbar>
    <view class="row-orderdet1">
      <view class="wp">
        <view class="m-orderdet1">
          <image class="bg1" mode="widthFix" :src="imageUrl +'list/bg3.png'"></image>
          <view class="box">
            <image class="car" mode="widthFix" :src="imageUrl +'list/car.png'"></image>
            <view class="top">
              <view class="tit tit1"></view>
              <view class="num">{{ carItem.plate }}</view>
              <view class="ps">
                <image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'" v-if="false"></image>
                <view class="span" v-if="false">已认证</view>
              </view>
            </view>
            <view class="inner">
              <view class="tit2">
                <view class="left">停车时长</view>
                <view class="right">停车费用</view>
              </view>
              <view class="desc2 desc3">
                <view class="price">
                  <view class="p1">{{ result.hours }}</view>
                  小时
                  <view class="p1">{{ result.minutes }}</view>
                  分钟
                </view>
                <view class="pay">
                  ￥
                  <view class="p2">{{ carItem.parkMoney / 100 }}</view>
                </view>
              </view>
            </view>
            <view class="dw">
              <view class="group">
                <view class="left">停车场</view>
                <view class="right">{{ carItem.parkName }}</view>
              </view>
              <view class="group">
                <view class="left">入场时间</view>
                <view class="right">{{ carItem.inTime }}</view>
              </view>
              <view class="group">
                <view class="left">出场时间</view>
                <view class="right">未离场</view>
              </view>
              <view class="group" v-if="false">
                <view class="left">订单号</view>
                <view class="right">{{ carItem.payId }}
                  <view @click="onCopy" class="copy">
                    <image class="icon" mode="widthFix" :src="imageUrl +'list/copy.svg'">
                    </image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="m-orderdet2" v-if="false">
          <view class="group">
            <view class="tit">进场图片</view>
            <view class="box">
              <image :src="carItem.imagesUrlList[0] " class="img" mode="aspectFill"></image>
            </view>
          </view>
          <view class="group">
            <view class="tit">进场图片</view>
            <view class="box">
              <image :src="carItem.imagesUrlList[1]" class="img" mode="aspectFill"></image>
            </view>
          </view>
          <view class="group">
            <view class="tit">进场图片</view>
            <view class="box">
              <image :src="carItem.imagesUrlList[2]" class="img" mode="aspectFill"></image>
            </view>
            <!-- <view class="box video" @click="show = true">
              <image :src="imageUrl +'list/pic1.jpg'" class="img" mode="aspectFill"></image>
              <image :src="imageUrl +'list/play.svg'" class="play" mode="widthFix"></image>
            </view> -->
          </view>
        </view>
        <view class="m-orderdet1 m-orderdet3">
          <view class="dw">
            <view class="group">
              <view class="left">停车费用</view>
              <view class="right">￥{{ carItem.parkMoney / 100 }}</view>
            </view>
            <view class="group">
              <view class="left">已付金额</view>
              <view class="right">-￥{{ carItem.paidMoney / 100 }}</view>
            </view>
            <view class="group">
              <view class="left">优惠券</view>
              <view class="right">-￥{{ carItem.discountMoney / 100 }}
                <u-icon name="arrow-right" color="rgba(28, 39, 76, 0.6)" size="12" v-if="false"></u-icon>
              </view>
            </view>
            <view class="group">
              <view class="left left2">
              </view>
              <view class="price2 price3">
                费用总额
                <view class="span">￥{{ carItem.payMoney / 100 }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="m-orderdet4">
          <view class="tit">
            支付方式
          </view>
          <radio-group>
            <view class="radgroup">
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon1.png'"></image>
                  微信支付
                </view>
                <radio checked="false" value="1"/>
              </label>
              <label v-if="false">
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon2.png'"></image>
                  钱包支付(￥100)
                </view>
                <radio checked="true" value="2"/>
              </label>

            </view>
          </radio-group>
        </view>
      </view>
    </view>
    <view class="g-ht"></view>
    <view class="g-dwbtn">
      <view class="left left2">
        <view class="p">
          总额
          <view class="p1">￥{{ carItem.payMoney / 100 }}</view>
        </view>
        <view class="p2">
          优惠券减免￥{{ carItem.discountMoney / 100 }} |
          <view class="span" @click="show2 = true">查看明细
            <image class="icon"
                   mode="widthFix" :src="imageUrl +'list/arr3.svg'"></image>
          </view>
        </view>
      </view>
      <view class="right">
        <!-- <view class="btn1 btn2">申诉</view> -->
        <view class="btn1 btn3" @click="goPay">立即支付</view>
      </view>
    </view>
    <u-popup :show="show" closeable @close="close" @open="open" mode="center" :round="10">
      <view class="m-popdet1">
        <view class="tit">
          监控录像
        </view>
        <div class="pic">
          <video id="myVideo" class="video" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                 @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
          <!-- <image :src="imageUrl +'list/pic1.jpg'" class="img" mode="aspectFill"></image> -->
        </div>
      </view>
    </u-popup>
    <!-- 优惠明细弹窗 -->
    <u-popup :show="show2" closeOnClickOverlay safeAreaInsetBottom closeable @close="close2" @open="open2" mode="bottom"
             :round="10">
      <view class="m-popdet2">
        <view class="tit">
          金额明细
        </view>
        <view class="m-orderdet1 m-orderdet3">
          <view class="dw">
            <view class="group">
              <view class="left">停车费用</view>
              <view class="right">￥{{ carItem.parkMoney / 100 }}</view>
            </view>
            <view class="group">
              <view class="left">已付金额</view>
              <view class="right">￥{{ carItem.paidMoney / 100 }}</view>
            </view>
            <view class="group">
              <view class="left">优惠券</view>
              <view class="right">-￥{{ carItem.discountMoney / 100 }}</view>
            </view>
            <view class="group">
              <view class="left left2">
              </view>
              <view class="price2 price3">
                费用总额
                <view class="span">￥{{ carItem.payMoney / 100 }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>


<script>
import {post} from "../../api/myHttps";

export default {
  data() {
    return {
      payId: 0,
      payModeKeyword: '',
      // 头部背景色
      bgColor: 'transparent',
      show: false,
      show2: false,
      carItem: "",
      result: {
        hours: '00',
        minutes: '00'
      },

      plate: '',
    }
  },
  onLoad(option) {
    let plate = option.plate;
    let ownerId = option.ownerId;

    post('/city-pay/eulb/createParkOrder', {
      plate: plate,
      ownerId: ownerId
    }).then((res) => {
      console.log(res);
      this.payModeKeyword = res.payModeList.find(x => x.indexOf('weixin') > -1);
      this.payId = res.payId;

      post('/city-pay/eulb/getParkOrder?payId=' + this.payId, {
        payId: this.payId
      }).then((res) => {
        console.log(res);
        this.carItem = res;
        this.result = this.getTimeDiff(this.carItem.inTime, this.carItem.getTime);
      })
    })
  },
  methods: {
    goPay() {
      if (this.carItem.payMoney < 1) {
        uni.showToast({
          title: '无需支付',
          icon: 'none'
        })
        return;
      }
      let data = {
        method: "park_fee",
        bizContent: {
          parkCode: this.carItem.parkCode,
          parkId: this.carItem.parkId,
          payId: this.payId,
          cityparkOwnerId: uni.getStorageSync("ownerId"),
          subAppId: uni.getAccountInfoSync().miniProgram.appId,
          subOpenId: uni.getStorageSync("openid"),
          payModeTradeType: "JSAPI",
          payModeKeyword: this.payModeKeyword,
        }
      };
      console.log(data);
      post('/city-pay/eulb/prepare/pay', data).then((res) => {
        console.log(res);
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: res.extendParams.timeStamp,
          nonceStr: res.extendParams.nonceStr,
          package: res.extendParams.package,
          paySign: res.extendParams.paySign,
          signType: res.extendParams.signType,
          success: function (res) {
            console.log('success:' + JSON.stringify(res));
            uni.navigateTo({
              url: '/pages/order/paysucc'
            })
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err));
            uni.showToast({
              title: '支付失败：' + JSON.stringify(err),
              icon: 'none'
            })
          }
        });

      })
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false
      // console.log('close');
    },
    open2() {
      // console.log('open');
    },
    close2() {
      this.show2 = false
      // console.log('close');
    },
    // 头部滚动
    onPageScroll(res) {
      if (res.scrollTop >= 60) {
        this.bgColor = '#ffffff'
      } else {
        this.bgColor = 'transparent'
      }
    },
    onCopy() {
      uni.setClipboardData({
        data: '1245444444564644',
        success: function () {
          uni.showToast({
            title: '复制成功',
            duration: 2000
          });
        }
      });
    },
    getTimeDiff(startTime, endTime) {
      // 首先处理iOS不支持的日期格式问题
      const fixTime = (timeStr) => {
        if (!timeStr) return NaN; // 如果输入为空，则返回NaN
        return new Date(timeStr.replace(' ', 'T')); // 将空格替换为'T'，使其符合ISO 8601标准
      };

      const start = fixTime(startTime);
      const end = fixTime(endTime);
      // 检查日期是否有效
      if (isNaN(start) || isNaN(end)) {
        console.error('Invalid date format');
        return {
          hours: 0,
          minutes: 0
        };
      }

      // 确保结束时间晚于开始时间
      if (end < start) {
        console.warn('End time is before start time');
        return {
          hours: 0,
          minutes: 0
        };
      }
      const diffMs = end - start; // 得到毫秒数差异
      const totalMinutes = Math.floor(diffMs / 60000); // 转换为分钟
      const hours = Math.floor(totalMinutes / 60); // 计算小时数
      const minutes = totalMinutes % 60; // 剩余分钟数
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0')
      };
    },

  }
}
</script>

<style>
/deep/ .uni-radio-input.uni-radio-input-checked {
  border-color: transparent !important;
  background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;
}

/deep/ .wx-radio-input.wx-radio-input-checked {
  border-color: transparent !important;
  background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;

}
</style>
